<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>工程师</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/weui/dist/lib/weui.css">
    <link rel="stylesheet" href="/static/weui/dist/css/jquery-weui.css">
    <link rel="stylesheet" href="/static/weui/dist/lib/demos.css">
    <style>
        .weui_navbar_item.weui_bar_item_on {
            background-color:#EAEAEA;
        }
    </style>
</head>
<body>
<div class="weui_tab">
    <div class="weui_navbar">
        <a href="#tab1" class="weui_navbar_item weui_bar_item_on">
            抢单
        </a>
        <a href="#tab2" class="weui_navbar_item">
           已完成
        </a>
    </div>
    <style>
        .clear{clear: both;}
        .margin_50{margin-top: 52px;}
        .pad_6{padding-left: 6px;padding-right: 6px;}
        .mag_item{width: 100%;height: auto;}
        .mag_item img{width: 100%;height: auto;border: 0;}
    </style>
    <div class="clear margin_50"></div>
    <div class="weui_tab_bd">
        <div id="tab1" class="weui_tab_bd_item weui_tab_bd_item_active pad_6">
          <div class="weui_cells">
              <div class="weui_cell">
                  <div class="weui_cell_bd weui_cell_primary">
                      <p>3楼304宽带问题</p>
                  </div>
                  <#--<div class="weui_cell_ft">说明文字</div>-->
                  <a href="javascript:;" class="weui_btn weui_btn_default">抢单</a>
              </div>
              <div class="weui_cell">
                  <div class="weui_cell_bd weui_cell_primary">
                      <p>3楼304宽带问题</p>
                  </div>
              <#--<div class="weui_cell_ft">说明文字</div>-->
                  <a href="javascript:;" class="weui_btn weui_btn_default">抢单</a>
              </div>
              <div class="weui_cell">
                  <div class="weui_cell_bd weui_cell_primary">
                      <p>3楼304宽带问题</p>
                  </div>
              <#--<div class="weui_cell_ft">说明文字</div>-->
                  <a href="javascript:;" class="weui_btn weui_btn_default">抢单</a>
              </div>
              <div class="weui_cell">
                  <div class="weui_cell_bd weui_cell_primary">
                      <p>3楼304宽带问题</p>
                  </div>
              <#--<div class="weui_cell_ft">说明文字</div>-->
                  <a href="javascript:;" class="weui_btn weui_btn_default">抢单</a>
              </div>
              <div class="weui_cell">
                  <div class="weui_cell_bd weui_cell_primary">
                      <p>3楼304宽带问题</p>
                  </div>
              <#--<div class="weui_cell_ft">说明文字</div>-->
                  <a href="javascript:;" class="weui_btn weui_btn_default">抢单</a>
              </div>
              <div class="weui_cell">
                  <div class="weui_cell_bd weui_cell_primary">
                      <p>3楼304宽带问题</p>
                  </div>
              <#--<div class="weui_cell_ft">说明文字</div>-->
                  <a href="javascript:;" class="weui_btn weui_btn_default">抢单</a>
              </div>
          </div>
        </div>
        <div id="tab2" class="weui_tab_bd_item">
            <div class="weui_cells">
                <div class="weui_cell">
                    <div class="weui_cell_bd weui_cell_primary">
                        <p>9楼902水管破裂</p>
                    </div>
                <#--<div class="weui_cell_ft">说明文字</div>-->
                    <a href="javascript:;" class="weui_btn weui_btn_default">已完成</a>
                </div>
                <div class="weui_cell">
                    <div class="weui_cell_bd weui_cell_primary">
                        <p>9楼902水管破裂</p>
                    </div>
                <#--<div class="weui_cell_ft">说明文字</div>-->
                    <a href="javascript:;" class="weui_btn weui_btn_default">已完成</a>
                </div>
                <div class="weui_cell">
                    <div class="weui_cell_bd weui_cell_primary">
                        <p>9楼902水管破裂</p>
                    </div>
                <#--<div class="weui_cell_ft">说明文字</div>-->
                    <a href="javascript:;" class="weui_btn weui_btn_default">已完成</a>
                </div>
                <div class="weui_cell">
                    <div class="weui_cell_bd weui_cell_primary">
                        <p>9楼902水管破裂</p>
                    </div>
                <#--<div class="weui_cell_ft">说明文字</div>-->
                    <a href="javascript:;" class="weui_btn weui_btn_default">已完成</a>
                </div>
                <div class="weui_cell">
                    <div class="weui_cell_bd weui_cell_primary">
                        <p>9楼902水管破裂</p>
                    </div>
                <#--<div class="weui_cell_ft">说明文字</div>-->
                    <a href="javascript:;" class="weui_btn weui_btn_default">已完成</a>
                </div>
                <div class="weui_cell">
                    <div class="weui_cell_bd weui_cell_primary">
                        <p>9楼902水管破裂</p>
                    </div>
                <#--<div class="weui_cell_ft">说明文字</div>-->
                    <a href="javascript:;" class="weui_btn weui_btn_default">已完成</a>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/static/weui/dist/lib/jquery-2.1.4.js"></script>
<script src="/static/weui/dist/js/jquery-weui.js"></script>
<script>
    $(function() {
        $(".weui_navbar a").bind("click", function(){
            //操作导航栏
            $(".weui_bar_item_on").removeClass('weui_bar_item_on');
            //console.log($(this).find("a"));
            $(this).addClass("weui_bar_item_on");
            //操作内容切换
            $(".weui_tab_bd .weui_tab_bd_item_active").removeClass('weui_tab_bd_item_active');
            var data_toggle =jQuery(this).attr("href");
            $(data_toggle).addClass("weui_tab_bd_item_active");
        });
    });
</script>
</body>
</html>